<template>
  <div class="list">
    <el-table
      ref="table"
      :data="tableData"
      border
      stripe
      style="width: 100%"
      :row-key="getRowKeys"
      @selection-change="handleSelectionChange"
      @current-change="handleCurrentRowChange"
      :highlight-current-row="true"
    >
      <el-table-column
        header-align="center"
        type="selection"
        width="40"
        align="center"
        :reserve-selection="true"
        v-if="select"
      ></el-table-column>
      <el-table-column
        header-align="center"
        type="index"
        width="60"
        label="序号"
        :index="indexMethod"
        align="center"
        v-if="showIndex"
      ></el-table-column>
      <!-- header-align="center" -->

      <el-table-column
        v-for="(item, index) in column"
        :key="index"
        :align="item.align"
        :label="item.label"
        :width="item.width"
        :prop="item.name"
        :show-overflow-tooltip="item.showOverflowTooltip"
      >
        <template slot-scope="scope">
          <div class="buttons" v-if="item.buttons">
            <znxd-button-list
              :buttons="item.buttons"
              :initData="scope.row"
            ></znxd-button-list>
            <znxd-dropdown-button
              class="dropdownButton"
              v-if="item.dropdownButtons"
              :buttons="item.dropdownButtons"
              :initData="scope.row"
              label="更多"
            ></znxd-dropdown-button>
          </div>
          <div v-else-if="item.handleGetName">
            {{ item.handleGetName(scope.row[item.name]) }}
          </div>
          <div v-else>{{ scope.row[item.name] }}</div>
        </template>
      </el-table-column>

      <!-- <el-table-column v-for="(item, index) in column" :key="index" :align="item.align" :label="item.label" :width="item.width" :show-overflow-tooltip="item.showOverflowTooltip">
        <template slot-scope="scope">
          <div class="buttons" v-if="item.buttons">
            <znxd-button-list :buttons="item.buttons" :initData="scope.row"></znxd-button-list>
            <znxd-dropdown-button class="dropdownButton" v-if="item.dropdownButtons" :buttons="item.dropdownButtons" :initData="scope.row" label="更多"></znxd-dropdown-button>
          </div>
          <div v-else-if="item.handleGetName">{{ item.handleGetName(scope.row[item.name]) }}</div>
          <div v-else>{{ scope.row[item.name] }}</div>
        </template>
      </el-table-column>-->
    </el-table>
    <el-pagination
      v-if="pagination"
      @size-change="handleSizeChange"
      layout="total, prev, pager, next, jumper"
      :page-size="page.pageSize"
      :total="page.total"
      :current-page="page.pageNo"
      @current-change="handleCurrentChange"
      style="margin: 20px 0 0 0"
    ></el-pagination>
  </div>
</template>
<script>
// import ButtonList from "../button/buttonList.vue";
import znxdButtonList from "../../znxd-button-list/src/main.vue"
import znxdDropdownButton from "../../znxd-dropdown-button/src/main.vue"
export default {
  name: "znxdList",
  components: {
    // ButtonList
    znxdButtonList,
    znxdDropdownButton
  },
  data () {
    return {
      selection: []
    }
  },
  props: {
    tableData: Array,
    /* page
      page: {
        pageNo: 1, // 当前位于哪页
        pageSize: 8, // 1页显示多少条
        total: 0
      }
    */
    page: Object,
    /* column 数组对象参数说明
    {
      align: "center",
      name: "datasourceName",
      label: "数据源名称",
      showOverflowTooltip: true,
      width: 100,
      //原始值回调函数
      handleGetName: (code) => {
        return getDiction(this.statusOptions, code);
      },
      //按钮配置参考按钮组件配置规则
      buttons: []
    }
    */
    column: Array,
    pagination: Boolean, // 是否加载分页
    select: Boolean, // 是否加载复选框
    showIndex: {
      type: Boolean,
      default: () => {
        return true
      }
    }, // 是否加载索引
    initData: Array
  },
  watch: {
    initData: {
      deep: true,
      handler: function (val) {
        this.selection = [...val]
        this.$refs.table.clearSelection()
        this.selection.map((row) => {
          this.$refs.table.toggleRowSelection(row, true)
        })
      }
    },
    selection: {
      deep: true,
      handler: function (val) {
        this.$emit("input", val)
      }
    }
  },
  methods: {
    handleSizeChange (val) {
      this.page.pageNo = 1
      this.page.pageSize = val
      // this.getSourceData()
      this.$emit("handleSizeChange", this.page)
    },
    handleCurrentChange (val) {
      // 翻页
      this.page.pageNo = val
      // this.getSourceData()
      // console.log(this.page)
      this.$emit("handlePageChange", this.page)
    },
    getRowKeys (row) {
      return row.columnName
      // return row[1]
    },
    indexMethod (index) {
      // table序号
      let start = 0
      if (this.page) {
        start = (this.page.pageNo - 1) * this.page.pageSize
      }
      return start + index + 1
    },
    handleSelectionChange (val) {
      // console.log("handleSelectionChange", val)
      this.selection = [...val]
      this.$emit("handleGetSelection", val)
    },
    handleCurrentRowChange (val) {
      // console.log("handleSelectionChange", val);
      // this.selection = [...val];
      this.$emit("input", val)
      this.$emit("handleCurrentChange", val)
    },
    setCurrent (row) {
      this.$refs.table.setCurrentRow(row)
    }
  },
  mounted () {
    if (this.initData) { this.selection = [...this.initData] }
    this.$refs.table.clearSelection()
    this.selection.map((row) => {
      this.$refs.table.toggleRowSelection(row, true)
    })
  }
};
</script>
<style lang="scss" scoped>
.list {
  .buttons {
    display: flex;
    flex-direction: row;
  }
  .dropdownButton {
    margin: 0 15px;
    line-height: 25px;
  }
}
</style>
<style lang="scss">
.el-tooltip__popper {
  max-width: 40%; //宽度可根据自己需要进行设置
  line-height: 1.2rem;
}
</style>
